<template>
	<Nav class="f" bgColor="#020121">
		<view class="title dispaly-center p-l-32 nav" @click="$goUrl('back')">
			<view class="icon dispaly-align-center">
				<!-- <image src="/static/icon/left.png" mode="aspectFill"></image> -->
				<u-icon name="arrow-left" color="#fff" size="34"></u-icon>
			</view>
			<view class="r-name">发布定制</view>
		</view>
	</Nav>
	<view :style="{marginTop: navHeiht+ 'px'}">
		<view class="bg" :style="{marginTop:navHeiht + 'px'}"></view>
		<view class="content p-32">
			<view class="address common dispaly-just-between">
				<view class="left">
					<view class="user dispaly-center">
						<view class="name">张文欣</view>
						<view class="tel">189****2359</view>
					</view>
					<view class="add">重庆市九龙坡区火炬大厦1-1</view>
				</view>
				<view class="right">
					<u-icon name="arrow-right" color="#7b7b89" size="34"></u-icon>
				</view>
			</view>
			<view class="form common">
				<view class="title">根据实际需求发布信息等待师傅接单制作</view>
				<view class="upload">
					<ImageUpload :number="4" />
				</view>
				<view class="pro-title common1">
					<view class="item-title dispaly-center">
						<view class="tip">*</view>
						<view class="title-text">标题</view>
					</view>
					<view class=" t-ip">
						<input placeholder="请输入商品标题" v-model="formData.title" />
					</view>
				</view>

				<view class="pro-title common1 dispaly-just-between">
					<view class="item-title dispaly-center f-2">
						<view class="tip">*</view>
						<view class="title-text">购买单号</view>
					</view>
					<view class="ip f-4">
						<input placeholder="填写店铺里面的购买的订单编号" v-model="formData.title" />
					</view>
				</view>

				<view class="pro-title common1 dispaly-just-between">
					<view class="item-title dispaly-center f-2">
						<view class="tip">*</view>
						<view class="title-text">服装类型</view>
					</view>
					<view class="ip f-4 dispaly-center" @click="typeShow = true">
						<view class="name">{{formData.type ? formData.type : '请选择服装类型'}}</view>
						<view class="right">
							<u-icon name="arrow-right" color="#7b7b89" size="34"></u-icon>
						</view>
					</view>
				</view>

				<view class="pro-title common1 dispaly-just-between">
					<view class="item-title dispaly-center f-2">
						<view class="title-text">选择师傅</view>
					</view>
					<view class="ip f-4 dispaly-center" @click="teacherShow = true">
						<view class="name" v-if="!formData.teacher.length">请选择师傅</view>
						<view class="name" v-else>
							<u-tag class="tag" size="mini" color="#fff" border-color="#020121" bg-color="#020121"
								v-for="(item, index) in formData.teacher" :key="item.name + index" :text="item.name" />
						</view>
						<view class="right">
							<u-icon name="arrow-right" color="#7b7b89" size="34"></u-icon>
						</view>
					</view>
				</view>

				<view class="pro-title common1 dispaly-just-between">
					<view class="item-title dispaly-center f-2">
						<view class="title-text">预算金额</view>
					</view>
					<view class="ip f-4">
						<input placeholder="默认为议价" v-model="formData.title" />
					</view>
				</view>

				<view class="pro-title common1">
					<view class="item-title dispaly-center">
						<view class="title-text">需求说明</view>
					</view>
					<view class="tear">
						<textarea class="d" placeholder="如需特殊定制需求请说明" cols="30" rows="10"></textarea>
					</view>
				</view>


				<view class="btn-box submit dispaly-align-center">
					<view class="btn dispaly-align-center">确认发布</view>
				</view>
			</view>
		</view>
	</view>

	<!-- 服装类型选择 -->
	<u-select value-name="id" label-name="name" v-model="typeShow" :list="typeList" confirm-color="#020121"
		@confirm="typeConfirm"></u-select>

	<u-popup v-model="teacherShow" border-radius="14" mode="bottom ">
		<view class="t-box">
			<view class="dispaly-align-center t-title">选择师傅</view>
			<scroll-view scroll-y="true" class="scroll-Y">
				<view class="dispaly-center p-32 flex-warp">
					<view class="item dispaly-align-center" :class="{'ac': item.isS}" @click="item.isS = !item.isS"
						v-for="item in teacherList" :key="item.id">{{item.name}}</view>
				</view>
			</scroll-view>
			<view class="btn-box dispaly-align-center">
				<view class="btn dispaly-align-center" @click="teacherConfirm">确定</view>
			</view>
		</view>
	</u-popup>

</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive
	} from 'vue'
	import {
		getElementHeight
	} from '@/utils/util'
	import ImageUpload from '@/compoment/imageUpload/imageUpload.vue'

	let formData = reactive({
		title: '',
		type: '中式礼服',
		teacher: []
	})

	const typeShow = ref(false)
	const typeList = ref([{
			id: '1',
			name: '中式礼服'
		},
		{
			id: '2',
			name: '西施礼服'
		}
	])

	// 选择服装类型弹窗确定
	const typeConfirm = (data) => {
		formData.type = typeList.value[data[0].index].name
	}

	// 选择师傅
	const teacherList = ref([{
		name: '谭师傅',
		id: 1,
		isS: false
	}])

	onMounted(() => {
		for (var i = 0; i < 100; i++) {
			teacherList.value.push({
				name: '谭师傅' + i,
				id: 1,
				isS: false
			})
		}
	})
	const teacherShow = ref(false)

	// 选择确定
	const teacherConfirm = () => {
		teacherShow.value = false
		formData.teacher = teacherList.value.filter(item => item.isS)
	}


	// 获取元素高度
	const navHeiht = ref(0)
	onMounted(async () => {
		const res = await getElementHeight('.f')
		navHeiht.value = res
	})
</script>

<style lang="scss" scoped>
	.ac {
		background: linear-gradient(180deg, #020121 0%, rgba(2, 1, 33, 0) 100%) !important;
	}

	.home-content {
		margin: 0 32rpx;
	}

	.btn {
		width: 638rpx;
		height: 100rpx;
		background: linear-gradient(138deg, #7B7B89 0%, #020121 100%);
		border-radius: 60rpx;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
	}

	.tag {
		margin-right: 10rpx;
	}

	.r-name {
		color: #fff;
	}

	.t-box {
		position: relative;

		.t-title {
			font-family: Source Han Sans, Source Han Sans;
			font-weight: 700;
			font-size: 36rpx;
			color: #020121;
			padding-top: 20rpx;
		}

		.scroll-Y {
			height: 500rpx;
			max-height: 500rpx;

			.item {
				padding: 6rpx 10rpx;
				border: 1rpx solid #020121;
				font-size: 24rpx;
				margin: 10rpx;
				border-radius: 10rpx;
			}
		}

		.btn {
			margin-bottom: 20rpx;
		}
	}

	.common {
		padding: 32rpx 24rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
	}

	.common1 {
		padding: 32rpx 24rpx;
		background: #F4F6F8;
		border-radius: 20rpx;
		margin-top: 16rpx;
	}

	.title {
		.icon {
			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.bg {
		background: linear-gradient(180deg, #020121 0%, rgba(2, 1, 33, 0) 100%);
		height: 378rpx;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: -1;
	}

	.content {

		.address {
			.left {
				.user {
					.name {
						font-family: Source Han Sans, Source Han Sans;
						font-weight: 700;
						font-size: 36rpx;
						color: #020121;
						margin-right: 20rpx;
					}

					.tel {
						font-family: Source Han Sans, Source Han Sans;
						font-weight: 400;
						font-size: 28rpx;
						color: #7B7B89;
					}
				}

				.add {
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 400;
					font-size: 28rpx;
					color: #020121;
					margin-top: 16rpx;
				}
			}
		}

		.form {
			margin-top: 16rpx;
			padding-bottom: 24rpx;

			.title {
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 400;
				font-size: 28rpx;
				color: #020121;
			}

			.tear {
				.d {
					height: 100rpx;
					padding-top: 16rpx;
				}
			}

			.pro-title {
				.item-title {
					.tip {
						color: #FF0000;
						font-weight: 900;
						font-size: 28rpx
					}

					.title-text {
						font-family: Source Han Sans, Source Han Sans;
						font-weight: 400;
						font-size: 28rpx;
						color: #020121;
					}
				}

				.ip {
					input {
						width: 100%;
						padding: 0;
						font-family: Source Han Sans, Source Han Sans;
						font-weight: 400;
						font-size: 28rpx;
						color: #B6B6BB;
						text-align: right;
					}

					.name {
						width: 100%;
						font-family: Source Han Sans, Source Han Sans;
						font-weight: 500;
						font-size: 28rpx;
						color: #000000;
						text-align: right;
						margin-right: 20rpx;
					}
				}

				.t-ip {
					input {
						padding: 20rpx 0;
						font-family: Source Han Sans, Source Han Sans;
						font-weight: 400;
						font-size: 36rpx;
						color: #B6B6BB;
					}
				}
			}

			.submit {
				margin-top: 80rpx;
			}

			.upload {
				margin-top: 24rpx;
			}
		}
	}
</style>